<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/axios/dist/axios.min.js"></script>
    <script src="js/vue3.js"></script>
    <!--
    element-plus ui组件(饿了么 ui组件)
    -->
    <link rel="stylesheet" href="js/index.css">
    <script src="js/index.full.js"></script>
    <script src="js/index.iife.min.js"></script>
    <script src="js/zh-cn.js"></script>

</head>
<body>
    <div id="app">
        <el-button type="primary" @click="showAddDialog=!showAddDialog">增加</el-button>
        <el-button type="primary" @click="delSel()">删除选中</el-button>

                 <el-table ref="multSel" :data="tableData">
            <el-table-column width="50" fixed="left" type="selection"></el-table-column>
            <el-table-column width="80" label="ID"  prop="id"></el-table-column>
            <el-table-column width="180" label="账号" prop="mobile" ></el-table-column>
            <el-table-column width="180" label="注册时间"  prop="reg_time"></el-table-column>
            <el-table-column width="200" label="操作" label="操作">
                <template #default="scope">
                    <el-button type="danger" @click= "del(scope.row.id)" size="small" icon="Delete" circle>

                    </el-button>
                </template>
            </el-table-column>
        
         </el-table>
         <el-pagination :total="total" background
             layout="total,prev,pager,next,jumper"
             :page-size="limit" :current-page.sync="page"
             @current-change="jump"
        >
         </el-pagination>
         <el-dialog v-model="showAddDialog" title="增加用户">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="ruleForm" status-icon>
                <el-form-item prop="nmobile">
                    <el-input v-model="ruleForm.mobile" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="pwd">
                    <el-input v-model="ruleForm.pwd" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="login_btn" @click="add">登录</el-button>
                </el-form-item>
            </el-form>
         </el-dialog>
    </div>
    <script>
        const app = {
            data(){
                return{
                    tableData:null,  //表格的数据
                    total:0, //总记录数
                    page:1,
                    limit:6,
                    showAddDialog:false,
                    ruleForm: {
                        mobile: 'admin',
                        pwd: '123456'
                    },
                    rules: {
                       mobile: {
                            required: true,
                            message: '请输入用户名',
                            trigger: 'blur'
                        },
                        pwd: {
                            required: true,
                            message: '请输入密码',
                            trigger: 'blur'
                        },
                    }

                }
            },
            methods:{
                delSel() {
                    const self = this;
                    const sels = this.$refs.multSel.getSelectionRows();
                    const uids = sels.map(obj => obj.id);
                    axios.post("http://localhost:88/delMultUsers", uids).
                         then(res => {
                              if (res.data == 0) {
                                   location.reload();
                              }
                              else if (res.data == 1) {
                                   self.$message({
                                        message: '删除失败',
                                        duration: 100000
                                   })
                              }

                         })
               },
                del(id){
                    axios.get("http://localhost:88/delUser?id=" + id)
                    .then(res=>{
                        if(res.data == 0){
                            location.reload();
                          }
                          else if(res.data == 1){
                              self.$message({
                                  message:'错误',
                                  duration:1000
                              })
                            }

                    })

                    

                },
                add(){
                    const self = this;
                    axios.post("http://localhost:88/doReg", this.ruleForm)
                    .then(res=>{
                        if(res.data == 0){
                          location.reload();
                        }
                        else if(res.data == 1){
                            self.$message({
                                message:'账号已存在',
                                duration:1000
                            })
                        }
                    })

                },
                jump(val){
                    this.page = val;
                    this.initData();
                },
                initData(){
                    const self = this;
                    axios.get("http://localhost:88/users?page=" + this.page + "&limit=" + this.limit)
                    .then(res=>{
                        self.tableData = res.data.list; //用户的集合数据
                        self.total = res.data.total;  //总记录数
                    })
                }
            },
            mounted(){
                this.initData();

            }
        }
        const vueApp = Vue.createApp(app); //创建vue的对象实例对象
        vueApp.use(ElementPlus, {locale: ElementPlusLocaleZhCn}); //引用elementplus,组件
          //加载icons 图标图形组件
          for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
               vueApp.component(key, component);
          }
          vueApp.mount("#app");//挂载到某个html标签
    </script>
</body>
</html>